<template>
  <div class="index clearafter">
    <module-head></module-head>
    <div class="content flex">
      <div class="w220">
        <menu-list></menu-list>
      </div>
      <div class="w980 flex_full">
        <p class="flex flex_vcenter pdb20">
          <i class="titleTag"></i>
          <span class="fRedBig">随访规则设计</span>
        </p>
        <div class="whiteBg">
          <p class="yellowBtn ml20" @click="openAddBox()">新增</p>
          <div class="mt20"></div>

          <div class="dbox mb20" v-for="(index, value) in moduleList" v-show="value.Status != 'delete'">
            <p class="dboxTitle">第{{value.PLSX}}次</p>
            <div class="flex">
              <div style="width:80%">
                <ul class="flex flex_between pd20">
                  <li>
                    <span>名称：</span>
                    <span>{{value.SFMC}}</span>
                  </li>
                  <li>
                    <span>方式：</span>
                    <span>{{value.SFFS | sffs}}</span>
                  </li>
                  <li>
                    <span>执行次数：</span>
                    <span>{{value.ZXCS | zxcs}}次</span>
                  </li>
                  <li>
                    <span>间隔：</span>
                    <span>{{value.SJJG}}{{value.JGDW | jgdw}}</span>
                  </li>
                </ul>
                <ul class="flex">
                  <li>
                    <button class="pinkBtn ml20">{{value.YSMC}}</button>
                  </li>
                </ul>
              </div>
              <ul class="flex_full">
                <li class="yellowBtn blockCenter" @click="editItem(index, value)">修改</li>
                <li class="mt20"></li>
                <li class="orangeBtn blockCenter" @click="removeItem(index)">删除</li>
              </ul>
            </div>
          </div>
          <div class="mt20"></div>
          <p class="longBtn blockCenter" v-show="moduleList.length !=0" @click="saveDetail()">保 存</p>
        </div>
      </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="newRuleModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">新增随访明细规则</h4>
          </div>
          <div class="modal-body">
            <ul class="formList">
              <li>
                <label>计划顺序</label>
                <input type="text" class="form-control" v-model="addOrder" placeholder="请输入数字">
              </li>
              <li>
                <label>计划名称</label>
                <input type="text" class="form-control" v-model="addTitle">
              </li>
              <li class="searchBox">
                <label>随访方式</label>
                <select class="form-control" v-model="addType">
                  <option value="1">电话随访</option>
                  <option value="2">当面随访</option>
                  <option value="3">视频随访</option>
                </select>
              </li>
              <li>
                <label>执行次数</label>
                <select class="form-control" v-model="addTimes">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="0">不限次</option>
                </select>
              </li>
              <li>
                <label>上次间隔 </label>
                <input type="text" class="form-control" v-model="addInter" placeholder="请输入数字">
              </li>
              <li>
                <select class="form-control" v-model="addInterDw">
                  <option value="1">日</option>
                  <option value="2">周</option>
                  <option value="3">月</option>
                  <option value="4">年</option>
                </select>
              </li>
              <li>
                <label>随访问卷</label>
                <select class="form-control" v-model="addPaper">
                  <option :value="item" v-for="item in paperList">{{item.YSMC}}</option>
                </select>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button class="longBtn center-block" @click="addRule()">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" tabindex="-1" role="dialog" id="editRuleModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">修改随访明细规则</h4>
          </div>
          <div class="modal-body">
            <ul class="formList">
              <li>
                <label>计划顺序</label>
                <input type="number" class="form-control" v-model="editParam.PLSX" placeholder="请输入数字">
              </li>
              <li>
                <label>计划名称</label>
                <input type="text" class="form-control" v-model="editParam.SFMC">
              </li>
              <li class="searchBox">
                <label>随访方式</label>
                <select class="form-control" v-model="editParam.SFFS">
                  <option value="1">电话随访</option>
                  <option value="2">当面随访</option>
                  <option value="3">视频随访</option>
                </select>
              </li>
              <li>
                <label>执行次数</label>
                <select class="form-control" v-model="editParam.ZXCS">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="0">不限次</option>
                </select>
              </li>
              <li>
                <label>上次间隔 </label>
                <input type="text" class="form-control" v-model="editParam.SJJG" placeholder="请输入数字">
              </li>
              <li>
                <select class="form-control" v-model="editParam.JGDW">
                  <option value="1">日</option>
                  <option value="2">周</option>
                  <option value="3">月</option>
                  <option value="4">年</option>
                </select>
              </li>
              <li>
                <label>随访问卷</label>
                <select class="form-control" v-model="editPaper">
                  <option :value="item" v-for="item in paperList">{{item.YSMC}}</option>
                </select>
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button class="longBtn center-block" @click="saveEditRule()">保存</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>

<script>
  import Public from 'assets/public.js'
  import 'assets/lib/laydate/laydate.js'
  import 'assets/lib/laydate/need/laydate.css'
  import 'assets/lib/laydate/skins/danlan/laydate.css'
  import moduleHead from 'components/module-head'
  import menuList from 'components/menu-list'
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'

  export default {
    data () {
      return {
        addOrder: '',
        addTitle: '',
        addType: '',
        addTimes: '',
        addInter: '',
        addInterDw: '',
        addPaper: '',
        paperList: [],
        mainParam: {},
        moduleList: [],
        editParam: {},
        editIndex: '',
        editPaper: {}
      }
    },
    components: {
      moduleHead, menuList
    },
    ready () {
      var temp = window.location.href.split('?')[1]
      temp = temp.split('=')[1]
      temp = decodeURIComponent(temp)
      this.mainParam = JSON.parse(temp) //上个页面传来的参数
      console.log(JSON.stringify(this.mainParam))
      this.queryModule()
      this.queryPaperList()
    },
    filters: {
      'sffs' (val) {
        if (val == 1) {
          return '电话随访'
        } else if (val == 2) {
          return '当面随访'
        } else if (val == 3) {
          return '视频随访'
        }
      },
      'jgdw' (val) {
        if (val == 1) {
          return '日'
        } else if (val == 2) {
          return '周'
        } else if (val == 3) {
          return '月'
        }else if (val == 4) {
          return '年'
        }
      },
      'zxcs' (val) {
        if (val == 0) {
          return '不限'
        } else {
          return val
        }
      }
    },
    watch: {

    },
    methods: {
      openAddBox () {
        $('#newRuleModal').modal('show')
      },
      queryPaperList () {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/styleList",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            jgid: '1'
          },
          success:function(res){
            if (res.Data) {
              self.paperList = res.Data
            } else {

            }
          }
        })
      },
      addRule () {
        this.moduleList.push({
          MBID: 0,
          SFGZ: this.mainParam.GZID,
          moduleName: this.addPaper.YSMC,
          YSXH: this.addPaper.YSXH,
          BBH: this.addPaper.BBH,
          SFMC: this.addTitle,
          SFKS: this.mainParam.GLKS,
          SJJG: this.addInter,
          JGDW: this.addInterDw,
          ZXCS: this.addTimes,
          SFFS: this.addType,
          PLSX: this.addOrder,
          Status: 'add'
        })
        $('#newRuleModal').modal('hide')
        console.log(JSON.stringify(this.moduleList))
      },
      removeItem (index) {
        this.moduleList[index].Status = 'delete'
      },
      saveDetail () {
        var self = this
        var postdata= this.mainParam
        var tempList = this.moduleList
        for (var i = 0; i < tempList.length; i++) {
          tempList[i].PLSX = parseInt(tempList[i].PLSX)
          if (tempList[i].moduleName) {
            delete tempList[i].moduleName
          }
          if (!tempList[i].Status) {
            tempList[i].Status = 'edit'
          }
        }
        postdata.JHMB = tempList
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/commit/rule",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          contentType: 'application/json',
          data:JSON.stringify(postdata),
          beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt("保存成功")
              setTimeout(function(){
                window.location.href = "visitRule.html"
              },2000)
            }
          }
        })
      },
      queryModule () {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/plantemplate",
          headers: {
            "token": sessionStorage.getItem('sfToken')
          },
          data:{
            SFGZ: self.mainParam.GZID
          },
          success:function(res){
            if (res.Data) {
              self.moduleList = res.Data
            }
          }
        })
      },
      editItem (index, value) {
        $('#editRuleModal').modal('show')
        this.editParam = value
        this.editIndex = index
        for (var i = 0; i < this.paperList.length; i++) {
          if (value.YSXH == this.paperList[i].YSXH && value.BBH == this.paperList[i].BBH) {
            this.editPaper = this.paperList[i]
          }
        }
      },
      saveEditRule () {
        this.moduleList[this.editIndex] = this.editParam
        this.moduleList[this.editIndex].YSXH = this.editPaper.YSXH
        this.moduleList[this.editIndex].BBH = this.editPaper.BBH
        this.moduleList[this.editIndex].Status = 'edit'
        $('#editRuleModal').modal('hide')
        console.log(JSON.stringify(this.moduleList))
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/reset.css';
  @import '../../assets/flex.css';
  @import '../../assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  .formList>li{
    display:flex;
    -webkit-display:flex;
    padding:10px;
  }
  .formList>li>label{
    width:80px;
  }
</style>
